﻿<UserControl x:Class="Twilight.Views.SmallView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:controls="clr-namespace:Twilight.Controls"
    xmlns:v="clr-namespace:Twilight.Views"
    xmlns:vm="clr-namespace:Twilight.ViewModels"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
    mc:Ignorable="d"
    Width="200" Height="175">
    <UserControl.Resources>
        <vm:RotatingViewModel x:Key="tweetData" d:IsDataSource="True" />
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="{StaticResource darkBack}" DataContext="{Binding Mode=OneWay, Source={StaticResource tweetData}}">
        <vsm:VisualStateManager.VisualStateGroups>
            <vsm:VisualStateGroup x:Name="LoadStates">
                <vsm:VisualState x:Name="Loading" />
                <vsm:VisualState x:Name="Loaded">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="followers"
                                         Storyboard.TargetProperty="Opacity"
                                         To="1" />
                        <DoubleAnimation Storyboard.TargetName="follow"
                                         Storyboard.TargetProperty="Opacity"
                                         To="1" />
                        <DoubleAnimation Storyboard.TargetName="avatar"
                                         Storyboard.TargetProperty="Opacity"
                                         To="1" />
                    </Storyboard>
                </vsm:VisualState>
            </vsm:VisualStateGroup>
            <vsm:VisualStateGroup x:Name="TweetViewStates">
                <vsm:VisualState x:Name="Hidden">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="tweetCanvas"
                                         Storyboard.TargetProperty="Opacity"
                                         To="0.0"/>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="scaleTx"
                                     Storyboard.TargetProperty="ScaleX">
                            <DiscreteDoubleKeyFrame Value="1" KeyTime="0:0:0" />
                            <DiscreteDoubleKeyFrame Value="0" KeyTime="0:0:0.25" />
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="scaleTx"
                                     Storyboard.TargetProperty="ScaleY">
                            <DiscreteDoubleKeyFrame Value="1" KeyTime="0:0:0" />
                            <DiscreteDoubleKeyFrame Value="0" KeyTime="0:0:0.25" />
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </vsm:VisualState>
                <vsm:VisualState x:Name="Shown">
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="tweetCanvas"
                                     Storyboard.TargetProperty="Opacity">
                            <DiscreteDoubleKeyFrame Value="1.0" KeyTime="0:0:0" />
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimation Storyboard.TargetName="scaleTx"
                                     Storyboard.TargetProperty="ScaleX"
                                     To="1.0"/>
                        <DoubleAnimation Storyboard.TargetName="scaleTx"
                                     Storyboard.TargetProperty="ScaleY"
                                     To="1.0"/>
                    </Storyboard>
                </vsm:VisualState>
                <vsm:VisualStateGroup.Transitions>
                    <vsm:VisualTransition GeneratedDuration="0:0:0.25"/>
                </vsm:VisualStateGroup.Transitions>
            </vsm:VisualStateGroup>
        </vsm:VisualStateManager.VisualStateGroups>
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="100" />
            <RowDefinition Height="25" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50" />
            <ColumnDefinition Width="150"/>
        </Grid.ColumnDefinitions>
        <Border Width="48" Height="48" CornerRadius="3" BorderThickness="0" Background="#66FFFFFF">
            <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="48" Text="?" />
        </Border>
        <Image x:Name="avatar" Width="48" Height="48" Stretch="None" Margin="1" Source="{Binding Avatar}" Opacity="0">
            <Image.Clip>
                <RectangleGeometry RadiusX="3" RadiusY="3" Rect="0,0,48,48" />
            </Image.Clip>
        </Image>
        <Grid Grid.Row="0" Grid.Column="1" Margin="1,0,0,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="25" />
                <RowDefinition Height="25" />
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0" Grid.ColumnSpan="2" VerticalAlignment="Bottom" Foreground="#FFFFFFFF" FontWeight="Normal" Text="{Binding Username}" FontSize="16" FontFamily="Arial" />
            <StackPanel Orientation="Horizontal" Grid.Row="1" VerticalAlignment="Top">
                <TextBlock x:Name="followers" Foreground="#44FFFFFF" Text="{Binding Followers}" FontSize="14" FontFamily="Arial" Opacity="0"/>
                <Border Opacity="0" x:Name="follow" Width="45" Margin="2,0,0,0" Height="16" BorderThickness="1" CornerRadius="3" BorderBrush="#A7FFFFFF" VerticalAlignment="Top" Background="#FF1C9B19" Cursor="Hand">
                    <HyperlinkButton x:Name="followLink" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Arial" FontSize="14" Foreground="#FFFFFFFF" Margin="0,-1,0,0" NavigateUri="{Binding FollowUri}">
                        <TextBlock Text="follow" Padding="0" Margin="0" />
                    </HyperlinkButton>
                </Border>
            </StackPanel>
        </Grid>
        <controls:BubbleTweet Grid.Row="1" Grid.ColumnSpan="2" x:Name="tweetCanvas" ShowInfo="True" DataContext="{Binding CurrentTweet}">
            <controls:BubbleTweet.RenderTransform>
                <ScaleTransform x:Name="scaleTx" CenterX="22" CenterY="-7" ScaleX="0" ScaleY="0" />
            </controls:BubbleTweet.RenderTransform>
        </controls:BubbleTweet>
        <TextBlock x:Name="debug" Grid.Row="2" Grid.Column="0" />
        <HyperlinkButton Grid.Row="2" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Bottom" Content="twilight" NavigateUri="http://www.codeplex.com/twilight" Foreground="#44000000" />
    </Grid>
</UserControl>
